<script setup lang='ts'>
import { reactive, ref } from 'vue';
import {
    deleteStudentInfo,
    exportAllStudent,
    getAcademyList,
    getClassList,
    getStudentList,
    modifyStudentInfo, partialExport,
    resetStudentPassword,
    studentAdd
} from '@/api/interfaceApi/https';
import { Academy, AddStudent, ClassList, RestPassword, Student } from '@/api/interfaceApi/params';
import type { FormInstance, UploadProps } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getToken } from '@/utils/auth';

let academyList = ref([]);
let studentList = ref<any>([]);
let classList = ref([]);
const total = ref(); // 总记录数
let academyParams = ref<Academy>({
    pageNum: '1',
    pageSize: '10'
});
let studentParams = ref<Student>({
    classId: '',
    collegeId: '',
    name: '',
    grade:'',
    pageNum: 1,
    pageSize: 10,
    phoneNumber: '',
    stuNum: ''
});
// 获取学院列表
getAcademyList(academyParams.value).then((res: any) => {
    if (res.code === 200) {
        academyList.value = res.data;
        console.log(academyList);
    }
});

// 获取学生列表
function renderStudentList() {
    getStudentList(studentParams.value).then((res: any) => {
        if (res.code === 200) {
            studentList.value = res.rows;
            total.value = res.total;
            console.log(studentList.value);
        }
    });
}

// 渲染学生列表
renderStudentList();
// 搜索表单
const form = ref({
    name: '',
    collegeId: '',
    stuNum: '',
    phoneNumber: '',
    classId: '',
    grade: ''
});
// 分页
const handleCurrentChange = (val: number) => {
    studentParams.value.pageNum = val;
    renderStudentList();
};

// 模态框
let addVisible = ref(false);
let importVisible = ref(false);
let editVisible = ref(false);
const formRef = ref<FormInstance>();
const searchForm = ref<FormInstance>();
let classParams = ref<ClassList>({
    deptId: '',
    pageNum: '1',
    pageSize: '999'
});
// 添加表单
const validateForm = reactive<AddStudent>({
    anamnesis: '',
    classId: '',
    collegeId: '',
    education: '',
    enrollmentTime: '',
    experience: '',
    familyInfo: '',
    gender: '',
    grade: '',
    medicationSituation: '',
    name: '',
    phoneNumber: '',
    psychometricTest: '',
    remark: '',
    status: '',
    stuNum: '',
    birthday: ''
});
// 编辑表单
let editForm = ref<Student>({
    anamnesis: '',
    classId: '',
    collegeId: '',
    education: '',
    enrollmentTime: '',
    experience: '',
    familyInfo: '',
    gender: '',
    grade: '',
    medicationSituation: '',
    name: '',
    phoneNumber: '',
    psychometricTest: '',
    remark: '',
    status: '',
    stuNum: '',
    birthday: ''
});

function getClass() {
    getClassList(classParams.value).then((res: any) => {
        if (res.code === 200) {
            classList.value = res.rows;
        }
    });
}

// 学院下拉列表的值变化
const handleChange = (val: string) => {
    if (val) {
        searchStudent();
        classParams.value.deptId = val;
        getClass();
    } else {
        classList.value = [];
    }
    searchStudent();
};
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
    studentParams.value = {
        classId: '',
        collegeId: '',
        name: '',
        pageNum: 1,
        pageSize: 10,
        phoneNumber: '',
        stuNum: '',
        grade:''
    };
    renderStudentList();
};

// 搜索
function searchStudent() {
    studentParams.value = {
        classId: form.value.classId,
        collegeId: form.value.collegeId,
        name: form.value.name,
        pageNum: 1,
        pageSize: 10,
        phoneNumber: form.value.phoneNumber,
        stuNum: form.value.stuNum,
        grade:form.value.grade,
    };
    console.log(studentParams.value);
    renderStudentList();
}

// 上传的请求头
let uploadHeaders = ref({ 'Authorization': getToken() });
// 添加表单的校验
const submitAddForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            const addData = ref<AddStudent>({
                name: validateForm.name,
                gender: validateForm.gender,
                collegeId: validateForm.collegeId,
                classId: validateForm.classId,
                grade: validateForm.grade,
                stuNum: validateForm.stuNum,
                education: validateForm.education,
                phoneNumber: validateForm.phoneNumber,
                status: validateForm.status,
                enrollmentTime: validateForm.enrollmentTime,
                anamnesis: validateForm.anamnesis,
                experience: validateForm.experience,
                psychometricTest: validateForm.psychometricTest,
                familyInfo: validateForm.familyInfo,
                medicationSituation: validateForm.medicationSituation,
                remark: validateForm.remark,
                birthday: validateForm.birthday
            });
            studentAdd(addData.value).then((res: any) => {
                if (res.code === 200) {

                    addVisible.value = false;
                    formEl.resetFields();
                    ElMessage({
                        type: 'success',
                        message: '添加成功'
                    });
                    renderStudentList();
                }

            });
        } else {
            return false;
        }
    });
};

// 打开编辑模态框
function openEditDialog(student: any) {
    editForm.value = {
        id: student.id,
        anamnesis: student.anamnesis,
        classId: student.classId,
        collegeId: student.collegeId,
        education: student.education,
        enrollmentTime: student.enrollmentTime,
        experience: student.experience,
        familyInfo: student.familyInfo,
        gender: student.gender,
        grade: student.grade,
        medicationSituation: student.medicationSituation,
        name: student.name,
        phoneNumber: student.phoneNumber,
        psychometricTest: student.psychometricTest,
        remark: student.remark,
        status: student.status,
        stuNum: student.stuNum,
        birthday: student.birthday
    };
    classParams.value.deptId = student.collegeId;
    getClass();
    editVisible.value = true;
}

let editRuleForm = ref<FormInstance>();
// 编辑表单的校验
const submitEditForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            openMessageBox();
        } else {
            return false;
        }
    });
};
// 编辑模态框的提交
const openMessageBox = () => {
    ElMessageBox.confirm(
        '是否确认修改该学生信息',
        '提示',
        {
            confirmButtonText: '修改',
            cancelButtonText: '取消'
        }
    )
        .then(() => {
            modifyStudentInfo(editForm.value).then((res: any) => {
                if (res.code === 200) {
                    editVisible.value = false;
                    ElMessage({
                        type: 'success',
                        message: '修改成功'
                    });
                    renderStudentList();
                }
            });

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消修改'
            });
        });
};
// 普测模态框
let testVisible = ref(false);
let testInfo = ref<string>('');
let studentObj = ref<Student>({});

// 打开普测模态框
function openTestDialog(row: any) {
    testInfo.value = row.psychometricTest;
    studentObj.value = row;
    testVisible.value = true;
}

// 普测模态框的提交
const openTest = () => {
    ElMessageBox.confirm(
        '是否更改普测信息',
        '提示',
        {
            confirmButtonText: '修改',
            cancelButtonText: '取消',
            type: 'warning'
        }
    )
        .then(() => {
            studentObj.value.psychometricTest = testInfo.value;
            modifyStudentInfo(studentObj.value).then((res: any) => {
                if (res.code === 200) {
                    testVisible.value = false;
                    ElMessage({
                        type: 'success',
                        message: '修改成功'
                    });
                    renderStudentList();
                }
            });

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消修改'
            });
        });
};
let arr = ref<string[]>([]);
// 删除的消息弹出框
const openDelete = (id: string) => {
    arr.value.push(id);
    ElMessageBox.confirm(
        '此操作将永久删除该学生信息，是否继续？',
        '提示',
        {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning'
        }
    )
        .then(() => {
            deleteStudentInfo(arr.value).then((res: any) => {
                if (res.code === 200) {
                    ElMessage({
                        type: 'success',
                        message: '修改成功'
                    });
                    renderStudentList();
                }
            });

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除'
            });
        });
};
// 重置密码的消息弹出框
const openRest = (row: any) => {
    ElMessageBox.confirm(
        `此操作将重置学生:${row.name},密码为学号，是否继续？`,
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
        }
    )
        .then(() => {
            const data = ref<RestPassword>({
                studentId: row.id
            });
            resetStudentPassword(data.value).then((res: any) => {
                if (res.code === 200) {
                    ElMessage({
                        type: 'success',
                        message: '修改成功，新密码为该学生学号'
                    });
                    renderStudentList();
                }
            });
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消重置'
            });
        });
};
//上传之前的函数
const beforeFileUpload: UploadProps['beforeUpload'] = (rawFile) => {
    // console.log(rawFile.type);
    if (rawFile.type !== 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
        ElMessage.error('文件必须是xlsx格式！');
        return false;
    }
    return true;
};
// 上传成功的函数
const handleFileSuccess: UploadProps['onSuccess'] = (response) => {
    console.log(response);
    if (response.code === 200) {
        ElMessage.success('成功导入学生信息');
        importVisible.value = false;
    } else {
        ElMessage.info(response.msg);
    }
};
// 全部导出
async function exportAll() {
    const data = await exportAllStudent();
    // 创建Blob URL
    const blob = new Blob([data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' });

    // 创建一个指向Blob的URL
    const url = URL.createObjectURL(blob);

    // 创建一个a标签
    const a = document.createElement('a');
    a.href = url;
    a.download = '学生导出数据';

    // 模拟a标签点击，触发下载
    document.body.appendChild(a);
    a.click();

    // 清理临时DOM和对象URL
    document.body.removeChild(a);
    URL.revokeObjectURL(url);

}
// 导出按钮
let disabled = ref<boolean>(false);
let arrId = ref<string[]>([]);
// 多选
const handleSelectionChange = (val: number) => {
    if (val.length === 0){
        disabled.value = false;
    }else {
        disabled.value = true;
        arrId.value = val.map((item)=>{
            return item.id;
        });
    }
};
//班级选择器
const classChange = () => {
    searchStudent()
};
// 部分导出
async function exportPartial(){
    const res = await partialExport(arrId.value);
    // 创建Blob URL
    const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' });

    // 创建一个指向Blob的URL
    const url = URL.createObjectURL(blob);

    // 创建一个a标签
    const a = document.createElement('a');
    a.href = url;
    a.download = '学生导出数据';

    // 模拟a标签点击，触发下载
    document.body.appendChild(a);
    a.click();

    // 清理临时DOM和对象URL
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    console.log();
}
</script>

<template>
    <div class='student-container'>
        <el-form ref='searchForm' :model='form' label-width='70px' style='width: 100%'>
            <el-row :gutter='10' align='middle'>
                <el-col :span='6'>
                    <el-form-item label='姓名' prop='name'>
                        <el-input v-model='form.name' placeholder='请输入姓名' clearable @input='searchStudent'/>
                    </el-form-item>
                </el-col>
                <el-col :span='6'>
                    <el-form-item label='学院' prop='collegeId'>
                        <el-select v-model='form.collegeId' placeholder='请选择学院' clearable @change='handleChange'>
                            <el-option
                                v-for='item in academyList'
                                :key='item.deptId'
                                :label='item.deptName'
                                :value='item.deptId'
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span='6'>
                    <el-form-item label='年级' prop='grade'>
                        <el-input v-model='form.grade' placeholder='请输入年级' clearable @input='searchStudent'/>
                    </el-form-item>
                </el-col>
                <el-col :span='6'>
                    <el-form-item label='班级' prop='classId'>
                        <el-select v-model='form.classId' placeholder='请选择班级' clearable
                                   no-data-text='请先选择学院' @change='classChange'>
                            <el-option
                                v-for='item in classList'
                                :key='item.id'
                                :label='item.name'
                                :value='item.id'
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span='6'>
                    <el-form-item label='学号' prop='stuNum'>
                        <el-input v-model='form.stuNum' placeholder='请输入学号' clearable @input='searchStudent'/>
                    </el-form-item>
                </el-col>
                <el-col :span='6'>
                    <el-form-item label='手机号' prop='phoneNumber'>
                        <el-input v-model='form.phoneNumber' placeholder='请输入手机号' clearable @input='searchStudent'/>
                    </el-form-item>
                </el-col>
                <el-col :span='6'>
                    <el-form-item>
                        <el-button @click='resetForm(searchForm)'>重置</el-button>
                        <el-button type='primary' @click='searchStudent'>搜索</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <section class='redact'>
            <el-button type='primary' @click='addVisible = true'>添加</el-button>
            <el-button type='primary' @click='importVisible = true'>导入</el-button>
            <el-button type='primary' :disabled='!disabled' @click='exportPartial'>导出</el-button>
            <el-button type='primary' @click='exportAll'>全部导出</el-button>
        </section>
        <el-table :data='studentList' border :cell-style="{ textAlign: 'center',fontSize:'14px',lineHeight:'35px' }"
                  :header-cell-style="{ textAlign: 'center'}" @selection-change='handleSelectionChange'>
            <el-table-column type='selection' width='55' prop='checked'></el-table-column>
            <el-table-column type='index' label='序号' width='65'>
            </el-table-column>
            <el-table-column prop='name' label='姓名' />
            <el-table-column prop='college' label='学院' />
            <el-table-column prop='grade' label='年级' />
            <el-table-column prop='className' label='班级' />
            <el-table-column prop='stuNum' label='学号' />
            <el-table-column prop='phoneNumber' label='手机号' />
            <el-table-column prop='enrollmentTime' label='入学日期' />
            <el-table-column prop='address' label='操作' width='250'>
                <template #default='scope'>
                    <el-button link type='primary' @mousedown='e => e.preventDefault()'
                               @click='openEditDialog(scope.row)'>
                        <el-icon>
                            <EditPen />
                        </el-icon>
                        <span>编辑</span>
                    </el-button>
                    <el-button link type='primary' @mousedown='e => e.preventDefault()'
                               @click='openTestDialog(scope.row)'>
                        <el-icon>
                            <Document />
                        </el-icon>
                        <span>普测信息</span>
                    </el-button>
                    <el-button link type='primary' @mousedown='e => e.preventDefault()'
                               @click='openDelete(scope.row.id)'>
                        <el-icon>
                            <Delete />
                        </el-icon>
                        <span>删除</span>
                    </el-button>
                    <router-link :to="{path:'/record',query:{id:scope.row.id,stuNum:scope.row.stuNum}}">
                        <el-button link type='primary' @mousedown='e => e.preventDefault()'>
                            <el-icon>
                                <Paperclip />
                            </el-icon>
                            <span>心理档案</span>
                        </el-button>
                    </router-link>

                    <el-button link type='primary' @mousedown='e => e.preventDefault()' @click='openRest(scope.row)'>
                        <el-icon>
                            <Key />
                        </el-icon>
                        <span>重置密码</span>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class='pagination'>
            <el-pagination background layout='prev, pager, next' :total='total'
                           :page-size='studentParams.pageSize'
                           :current-page='studentParams.pageNum'
                           @current-change='handleCurrentChange' />
        </div>
        <!--添加模态框-->
        <el-dialog
            v-model='addVisible'
            class='add-dialog'
            title='添加学生'
            width='800'
        >
            <div class='student-content'>
                <el-form
                    ref='formRef'
                    style='width: 100%'
                    :model='validateForm'
                    :inline='true'
                    label-width='100px'
                    class='demo-ruleForm'

                >
                    <el-row align='middle'>
                        <el-col :span='12'>
                            <el-form-item label='学生姓名' prop='name'
                                          :rules="[{ required: true, message: '请输入姓名！' },{pattern:/^[\u4e00-\u9fa5]{2,5}$/,message: '姓名需要为汉字'},{ min: 2, max: 5, message: '姓名长度在 2 到 5 个字符'}]">
                                <el-input
                                    v-model='validateForm.name'
                                    type='text'
                                    autocomplete='off'
                                    placeholder='请输入学生姓名'
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span='12'>
                            <el-form-item label='学院' prop='collegeId'
                                          :rules="[{ required: true, message: '请选择学院' }]">
                                <el-select v-model='validateForm.collegeId' placeholder='请选择学院' clearable
                                           @change='handleChange'>
                                    <el-option
                                        v-for='item in academyList'
                                        :key='item.deptId'
                                        :label='item.deptName'
                                        :value='item.deptId'
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row align='middle'>
                        <el-col :span='12'>
                            <el-form-item label='年级' prop='grade'
                                          :rules="[{ required: true, message: '请输入年级' }]">
                                <el-input
                                    v-model='validateForm.grade'
                                    type='text'
                                    autocomplete='off'
                                    placeholder='请输入年级'
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span='12'>
                            <el-form-item label='班级' prop='classId'
                                          :rules="[{ required: true, message: '请选择班级' }]">
                                <el-select v-model='validateForm.classId' placeholder='请选择班级' clearable
                                           no-data-text='请先选择学院'>
                                    <el-option
                                        v-for='item in classList'
                                        :key='item.id'
                                        :label='item.name'
                                        :value='item.id'
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row align='middle'>
                        <el-col :span='12'>
                            <el-form-item label='学号' prop='stuNum'
                                          :rules="[{ required: true, message: '请输入学号' },{pattern: /^\d{10}$/,message: '学号为10位数字'}]">
                                <el-input
                                    v-model='validateForm.stuNum'
                                    type='text'
                                    autocomplete='off'
                                    placeholder='请输入学号'
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span='12'>
                            <el-form-item label='学历' prop='education'
                                          :rules="[{ required: true, message: '请选择学历' }]">
                                <el-select v-model='validateForm.education' placeholder='请选择学历' clearable>
                                    <el-option label='本科生' value='本科生' />
                                    <el-option label='研究生' value='研究生' />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row align='middle'>
                        <el-col :span='12'>
                            <el-form-item label='手机号' prop='phoneNumber'
                                          :rules="[{ required: true, message: '请输入手机号' },{pattern: /^1[3-9]\d{9}$/,message: '请输入正确的手机号'}]">
                                <el-input
                                    v-model='validateForm.phoneNumber'
                                    type='text'
                                    autocomplete='off'
                                    placeholder='请输入手机号'
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span='12'>
                            <el-form-item label='性别' prop='gender'
                                          :rules="[{ required: true, message: '请选择性别' }]">
                                <el-radio-group v-model='validateForm.gender'>
                                    <el-radio value='男' label='男'>男</el-radio>
                                    <el-radio value='女' label='女'>女</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row align='middle'>
                        <el-col :span='12'>
                            <el-form-item label='状态' prop='status'
                                          :rules="[{ required: true, message: '请选择状态' }]">
                                <el-radio-group v-model='validateForm.status'>
                                    <el-radio value='正常' label='正常'>正常</el-radio>
                                    <el-radio value='停用' label='停用'>停用</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span='12'>
                            <el-form-item label='入学时间' prop='enrollmentTime'
                                          :rules="[{ required: true, message: '请选择入学时间' }]">
                                <el-date-picker
                                    v-model='validateForm.enrollmentTime'
                                    type='date'
                                    placeholder='请选择入学时间'
                                    style='width: 100%'
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row align='middle'>
                        <el-col :span='12'>
                            <el-form-item label='出生日期' prop='birthday'
                                          :rules="[{ required: true, message: '请选择出生日期' }]">
                                <el-date-picker
                                    v-model='validateForm.birthday'
                                    type='date'
                                    placeholder='请选择出生日期'
                                    style='width: 100%'
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span='12'>
                            <el-form-item label='既往病历' prop='anamnesis'>
                                <el-input v-model='validateForm.anamnesis' show-word-limit type='textarea'
                                          autocomplete='off' maxlength='200' style='' />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row align='middle'>
                        <el-col :span='12'>
                            <el-form-item label='心理诊断经历' prop='experience'>
                                <el-input v-model='validateForm.experience' show-word-limit type='textarea'
                                          autocomplete='off' maxlength='200' />
                            </el-form-item>
                        </el-col>
                        <el-col :span='12'>
                            <el-form-item label='服药情况' prop='medicationSituation'>
                                <el-input v-model='validateForm.medicationSituation' show-word-limit type='textarea'
                                          autocomplete='off' maxlength='200' />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row align='middle'>
                        <el-col :span='12'>
                            <el-form-item label='家庭情况' prop='familyInfo'>
                                <el-input v-model='validateForm.familyInfo' show-word-limit type='textarea'
                                          autocomplete='off' maxlength='200' />
                            </el-form-item>
                        </el-col>
                        <el-col :span='12'>
                            <el-form-item label='其他' prop='remark'>
                                <el-input v-model='validateForm.remark' show-word-limit type='textarea'
                                          autocomplete='off' maxlength='200' />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <template #footer>
                <div class='dialog-footer'>
                    <el-button @click='addVisible = false'>取消</el-button>
                    <el-button type='primary' @click='submitAddForm(formRef)'>
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!--导入模态框-->
        <el-dialog class='import-dialog'
                   v-model='importVisible'
                   title='学生导入'
                   width='402'
        >
            <el-upload
                class='upload-demo'
                name='file'
                drag
                action='/dev-api/system/student/import'
                :headers='uploadHeaders'
                :show-file-list='false'
                :on-success='handleFileSuccess'
                :before-upload='beforeFileUpload'
            >
                <el-icon class='el-icon--upload'>
                    <upload-filled />
                </el-icon>
                <div class='el-upload__text'>
                    将文件拖到此处，或 <em>点击上传</em>
                </div>
                <template #tip>
                    <div class='el-upload__tip'>
                        仅允许导入xlsx格式文件。
                        <a href='学生导入模板.xlsx' download=''>下载模板</a>
                    </div>
                </template>
            </el-upload>

            <template #footer>
                <div class='dialog-footer'>
                    <el-button @click='importVisible = false'>取消</el-button>
                    <el-button type='primary' @click='importVisible = false'>
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!--编辑模态框-->
        <el-dialog
            v-model='editVisible'
            title='编辑学生'
            width='800'
            class='edit-dialog'
        >
            <div class='student-content'>
                <el-form
                    ref='editRuleForm'
                    style='width: 100%'
                    :model='editForm'
                    :inline='true'
                    label-width='100px'
                    class='demo-ruleForm'

                >
                    <el-row align='middle'>
                        <el-col :span='12'>
                            <el-form-item label='学生姓名' prop='name'
                                          :rules="[{ required: true, message: '请输入姓名！' },{ min: 2, max: 5, message: '姓名长度在 2 到 5 个字符'}]">
                                <el-input
                                    v-model='editForm.name'
                                    type='text'
                                    autocomplete='off'
                                    placeholder='请输入学生姓名'
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span='12'>
                            <el-form-item label='学院' prop='collegeId'
                                          :rules="[{ required: true, message: '请选择学院' }]">
                                <el-select v-model='editForm.collegeId' placeholder='请选择学院' clearable
                                           @change='handleChange'>
                                    <el-option
                                        v-for='item in academyList'
                                        :key='item.deptId'
                                        :label='item.deptName'
                                        :value='item.deptId'
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row align='middle'>
                        <el-col :span='12'>
                            <el-form-item label='年级' prop='grade'
                                          :rules="[{ required: true, message: '请输入年级' }]">
                                <el-input
                                    v-model='editForm.grade'
                                    type='text'
                                    autocomplete='off'
                                    placeholder='请输入年级'
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span='12'>
                            <el-form-item label='班级' prop='classId'
                                          :rules="[{ required: true, message: '请选择班级' }]">
                                <el-select v-model='editForm.classId' placeholder='请选择班级' clearable>
                                    <el-option
                                        v-for='item in classList'
                                        :key='item.id'
                                        :label='item.name'
                                        :value='item.id'
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row align='middle'>
                        <el-col :span='12'>
                            <el-form-item label='学号' prop='stuNum'>
                                <el-input
                                    v-model='editForm.stuNum'
                                    type='text'
                                    placeholder='请输入学号'
                                    disabled
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span='12'>
                            <el-form-item label='学历' prop='education'
                                          :rules="[{ required: true, message: '请选择学历' }]">
                                <el-select v-model='editForm.education' placeholder='请选择学历' clearable>
                                    <el-option label='本科生' value='本科生' />
                                    <el-option label='研究生' value='研究生' />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row align='middle'>
                        <el-col :span='12'>
                            <el-form-item label='手机号' prop='phoneNumber'
                                          :rules="[{ required: true, message: '请输入手机号' },{pattern: /^1[3-9]\d{9}$/,message: '请输入正确的手机号'}]">
                                <el-input
                                    v-model='editForm.phoneNumber'
                                    type='text'
                                    autocomplete='off'
                                    placeholder='请输入手机号'
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span='12'>
                            <el-form-item label='性别' prop='gender'
                                          :rules="[{ required: true, message: '请选择性别' }]">
                                <el-radio-group v-model='editForm.gender'>
                                    <el-radio value='1' label='1'>男</el-radio>
                                    <el-radio value='2' label='2'>女</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row align='middle'>
                        <el-col :span='12'>
                            <el-form-item label='状态' prop='status'
                                          :rules="[{ required: true, message: '请选择状态' }]">
                                <el-radio-group v-model='editForm.status'>
                                    <el-radio value='1' label='1'>正常</el-radio>
                                    <el-radio value='2' label='2'>停用</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span='12'>
                            <el-form-item label='入学时间' prop='enrollmentTime'
                                          :rules="[{ required: true, message: '请选择入学时间' }]">
                                <el-date-picker
                                    v-model='editForm.enrollmentTime'
                                    type='date'
                                    placeholder='请选择入学时间'
                                    style='width: 100%'
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row align='middle'>
                        <el-col :span='12'>
                            <el-form-item label='出生日期' prop='birthday'
                                          :rules="[{ required: true, message: '请选择出生日期' }]">
                                <el-date-picker
                                    v-model='editForm.birthday'
                                    type='date'
                                    placeholder='请选择出生日期'
                                    style='width: 100%'
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span='12'>
                            <el-form-item label='既往病历' prop='anamnesis'>
                                <el-input v-model='editForm.anamnesis' show-word-limit type='textarea'
                                          autocomplete='off' maxlength='200' style='' />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row align='middle'>
                        <el-col :span='12'>
                            <el-form-item label='心理诊断经历' prop='experience'>
                                <el-input v-model='editForm.experience' show-word-limit type='textarea'
                                          autocomplete='off' maxlength='200' />
                            </el-form-item>
                        </el-col>
                        <el-col :span='12'>
                            <el-form-item label='服药情况' prop='medicationSituation'>
                                <el-input v-model='editForm.medicationSituation' show-word-limit type='textarea'
                                          autocomplete='off' maxlength='200' />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row align='middle'>
                        <el-col :span='12'>
                            <el-form-item label='家庭情况' prop='familyInfo'>
                                <el-input v-model='editForm.familyInfo' show-word-limit type='textarea'
                                          autocomplete='off' maxlength='200' />
                            </el-form-item>
                        </el-col>
                        <el-col :span='12'>
                            <el-form-item label='其他' prop='remark'>
                                <el-input v-model='editForm.remark' show-word-limit type='textarea' autocomplete='off'
                                          maxlength='200' />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <template #footer>
                <div class='dialog-footer'>
                    <el-button @click='editVisible = false'>取消</el-button>
                    <el-button type='primary' @click='submitEditForm(editRuleForm)'>
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!--普测模态框-->
        <el-dialog
            v-model='testVisible'
            title='普测信息'
            width='700'
            class='generalTest'
            :show-close='true'
        >
            <template #header>
                <span>普测信息</span>
            </template>
            <div class='test-content'>
                <el-input v-model='testInfo' :rows='12' show-word-limit type='textarea' resize='none' size='large'
                          placeholder='请填写普测信息'
                          autocomplete='off' maxlength='200' />
            </div>
            <template #footer>
                <div class='dialog-footer'>
                    <el-button @click='testVisible = false'>取消</el-button>
                    <el-button type='primary' @click='openTest'>
                        保存
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped lang='scss'>
.student-container {
    padding: 26px 25px;
    width: 100%;

    .el-row {
        width: 100%;
        margin-bottom: 20px;

        .el-select {
            width: 100%;
        }
    }

    .redact {
        margin: 10px 0 20px;
    }

    .pagination {
        padding: 20px 0;
        float: right;
    }
}

.student-content {
    padding: 0 30px;

    .el-row {
        width: 100%;
        margin-bottom: 10px;
    }

    ::v-deep(.el-input__inner) {
        width: 100%;
    }

    ::v-deep(.el-select__inner) {
        width: 210px;
    }
}

::v-deep(.el-button--primary.is-link):hover {
    color: #409EFF;
}

::v-deep(.el-button--primary.is-link) {
    font-size: 14px;
}

::v-deep(.el-button [class*=el-icon]+span) {
    margin-left: 0;
}

::v-deep(.add-dialog .el-textarea__inner) {
    width: 210px;
    padding: 5px 15px 15px;
    resize: none;
    min-height: 105.6px;
    height: 105.6px;
}

::v-deep(.edit-dialog .el-textarea__inner) {
    width: 210px;
    padding: 5px 15px 15px;
    resize: none;
    min-height: 105.6px;
    height: 105.6px;
}

//导入模态框
.import-dialog {
    .dialog-footer {
        text-align: center;
    }
}

::v-deep(.el-upload__tip) {
    text-align: center;

    a {
        color: #00afff;
    }
}

::v-deep(.import-dialog .el-dialog__footer) {
    padding-top: 0;
}

//普测信息
.test-content {
    padding: 10px;
}

::v-deep(.generalTest .el-dialog__header) {
    padding: 11px 0 12px 26px;
    background-color: #1892ff;
    color: #fff;
    position: relative;
    width: 100%;
    margin-right: 0;
    font-size: 14px;
}

::v-deep(.generalTest .el-dialog__headerbtn) {
    top: -2px;
}

::v-deep(.generalTest .el-dialog__headerbtn .el-dialog__close) {
    color: #fff;
}

::v-deep(.generalTest .el-dialog__footer) {
    text-align: center;
}
</style>
